<template>
  <div class="container">
    <van-nav-bar title="种草" />

    <div class="box">
      <div class="item" v-for="(item,key) in list" :key="key">
        <div class="top">
          <div class="avatar">
            <div class="image">
              <img :src="item.business.avatar_text" />
            </div>
            <div class="name">{{ item.business.nickname }}</div>
          </div>
        </div>
        
        <div class="title">{{ item.remark }}</div>

        <div class="thumbs">
          <van-uploader v-model="fileList[`${item.id}`]" multiple :max-count="9" readonly :deletable="false" preview-size="105" :show-upload="false"/>
        </div>

        <div class="product">
          <div class="left">
            <van-image
              width="70"
              height="50"
              :src="item.product.thumbs_text"
              @click="ProductInfo(item.product.id)"
            />
          </div>
          <div class="right">
            <div class="name">{{ item.product.name }}</div>
            <div class="price">￥{{item.product.price}}</div>
          </div>
        </div>

        <div class="action">
          <div class="left">{{ item.createtime_text }}</div>
          <div class="right" @click="shareStatus(item.id)">
            <div class="item" v-if="item.status==1 && busid">
              <van-icon name="like" />
              <span>{{ item.likes_text}}</span>
            </div>
            <div class="item" v-if="item.status==0">
              <van-icon name="like-o" />
              <span>{{ item.likes_text}}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 添加相应的评论 -->
      <van-floating-bubble
        axis="xy"
        icon="chat"
        magnetic="x"
        @click="onOffsetClick"
      />
      <!-- 底部弹出 -->
      <van-popup
        v-model:show="ShowBottom"
        position="bottom"
        round
        :style="{ height: '80%' }"
      >
        <van-form @submit="submit">
            <!-- 评论 -->
            <van-field
                v-model="comment"
                rows="2"
                autosize
                label="评论"
                type="订单评论"
                maxlength="120"
                placeholder="请输入留言"
                show-word-limit
              />
            <!-- 文件上传 -->
            <van-field name="uploader" label="评论图片">
                <template #input>
                  <!-- multiple 上传多张图片 readonly只读-->
                  <van-uploader v-model="thumbs" preview-size="105" multiple :max-count="9"/>
                </template>
            </van-field>
            <!-- 选择已经购买的商品 -->
              <!-- 支付方式 -->
            <van-cell title="商品" v-model="proudctID" is-link @click="ProductShow = true"></van-cell>

            <div class="orderproduct" v-if="proStatus">
              <div class="left">
                <van-image
                  width="70"
                  height="50"
                  :src="ProInfo.thumbs_text"
                  @click="ProductInfo(ProInfo.id)"
                />
              </div>
              <div class="right">
                <div class="name">{{ ProInfo.name }}</div>
                <div class="price">￥{{ProInfo.price}}</div>
              </div>
            </div>
          <!-- 提交按钮组 只有立即评价的时候显示 -->
          <div style="width:50%;margin:2em auto;">
            <van-button round block color="linear-gradient(160deg, #0093E9 0%, #80D0C7 100%)" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-popup>
        <!-- 商品弹出框 -->
      <van-popup
        v-model:show="ProductShow"
        position="bottom"
        round
        closeable
        :style="{ height: '50%' }"
      >
          <div class="orderproduct" v-for="(item,key) in OrderProudct" :key="key">
              <div class="left">
                <van-image
                  width="70"
                  height="50"
                  :src="item.products.thumbs_text"
                  @click="ProuductClick(item.products.id)"
                />
              </div>
              <div class="right">
                <div class="name">{{ item.products.name }}</div>
                <div class="price">￥{{item.products.price}}</div>
              </div>
          </div>
      </van-popup>
    </div>
  </div>

  <Tabbar />
</template>

<script setup>
  const {proxy} = getCurrentInstance()
  //评论
  let comment = ref('');
  let thumbs = ref([])
  //添加评论
  let ShowBottom = ref(false)
  //接受busid
  let busid = proxy.$business.value.id;
  let list = ref([])
  let fileList = ref([])

  //商品
  let ProductShow = ref(false);
  let OrderProudct = ref([]);
  let proudctID = ref(0);
  let ProInfo = ref([]);//选中的对象
  let proStatus = ref(false)

  onMounted(()=>{
    shareInfo()
    selectProduct()
  })
  const shareInfo = async ()=>{
      //发送请求
      var result = await proxy.$POST({
        url:'/business/share',
        params:{busid:busid}
      })
      if(result.code == 0){
        proxy.$fail({
          message:result.msg,
          onClose:()=>proxy.$router.go(-1)
        })
      }
      result.data.map((item)=>{
        var pic = [];
        item.thumbs_text.map((val)=>pic.push({url:val}))//必须赋予url属性的值
        fileList.value[`${item.id}`] = pic
      })
      console.log(result.data);
      
      list.value = result.data;

  }
  //商品信息页面
  const ProductInfo = (proid)=>{
    proxy.$router.push({path:'/product/info',query:{proid:proid}})
  }
  const shareStatus = async (val)=>{
      if(!busid){
          proxy.$fail({
            message:'请先登录!',
            onClose:()=>proxy.$router.go(-1)
          })
      }
      var result = await proxy.$POST({
        url:'/index/status',
        params:{busid:busid,id:val},
      })
      if(result.code == 0){
        proxy.$fail(result.msg);
        return false
      }
      proxy.$success({
        message:result.msg,
        duration:200,
        onClose:()=>proxy.$router.go(0)
      })
  }
  //触发浮动气泡事件
  const onOffsetClick = ()=>{
    ShowBottom.value = true
  }

  const submit = async (val)=>{
    //获取值 rate comment thumbs
        //存入图片的数组
    var pic = [];
    thumbs.value.map((val)=>{pic.push(val.file);}) //val.file 通过UPLODE方法传递值时会自动转化成地址
    //封装数据
    var params = {
      busid:busid,//此id是order_product表的id
      thumbs:pic,//图片
      remark:comment.value,
      proid:ProInfo.value.id
    }
    //执行多次评论逐次执行的方法
    var result = await proxy.$UPLOAD({
      url:'/business/comment',
      params
    })
    if(result.code==0){
      proxy.$fail('评论失败!')
      return false;
    }
    proxy.$success({
      message:'评论成功!',
      onClose:()=>proxy.$router.go(0)
    })
  }
  //查询购买过的商品信息
  const selectProduct = async ()=>{
    var result = await proxy.$UPLOAD({
      url:'/business/selectProduct',
      params:{busid:busid}
    })
    if(result.code==0){
      $proxy.$fail(result.msg);
      return false
    }
    OrderProudct.value = result.data;
  }
  //点击商品后的状态
  const ProuductClick = (proid)=>{
    console.log(proid)

    proudctID.value = proid;
    ProductShow.value = false;
    OrderProudct.value.map((item,key)=>{
      if(item.proid==proid){
        ProInfo.value = item.products;
      }
    })
    proStatus.value = true;
    console.log(ProInfo.value)
  }
</script>

<style scoped>
  @import url('/assets/css/share.css');
</style>